// Base unit
@unit: 8px;

// Spacing
@spacing-mini: @unit / 2; // 4px
@spacing-small: @unit;    // 8px
@spacing-medium: @unit * 2; // 16px
@spacing-large: @unit * 3; // 24px
@spacing-xl: @unit * 4;    // 32px
@spacing-xxl: @unit * 6;   // 48px

// Colors
@primary-color: #1476ff;
@success-color: #67C23A;
@warning-color: #E6A23C;
@danger-color: #F56C6C;
@info-color: #909399;

@text-color: #333333;
@text-color-secondary: #666666;
@text-color-light: #999999;

// Font sizes
@font-size-xs: 12px;
@font-size-sm: 13px;
@font-size-base: 14px;
@font-size-lg: 16px;
@font-size-xl: 20px;
@font-size-xxl: 24px;

// Line heights
@line-height-tight: 1.2;
@line-height-base: 1.5;
@line-height-loose: 1.8;

// Border
@border-radius: 4px;
@border-radius-sm: 2px;
@border-radius-lg: 8px;
@border-color: #DCDFE6;
@border-width: 1px;

// Breakpoints
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xl: 1600px;

// Layout
@header-height: 60px;
@container-width: 1200px;
@sidebar-width: 256px;

// Z-index
@zindex-dropdown: 1000;
@zindex-sticky: 1020;
@zindex-fixed: 1030;
@zindex-modal-backdrop: 1040;
@zindex-modal: 1050;
@zindex-popover: 1060;
@zindex-tooltip: 1070;

// Shadows
@box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.12);
@box-shadow-dark: 0 2px 16px 0 rgba(0, 0, 0, 0.15);
@box-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1);

// Animation
@animation-duration-base: 0.2s;
@animation-duration-slow: 0.3s;
@animation-timing-ease-in: cubic-bezier(0.55, 0, 0.55, 0.2);
@animation-timing-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@animation-timing-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); 